<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>邀请函</title>
    <style>
        /* 整体样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 邀请函容器 */
       .invitation {
            width: 80%;
            max-width: 600px;
            margin: 50px auto;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        /* 标题样式 */
       .invitation h1 {
            text-align: center;
            color: #333;
        }

        /* 时间地点信息样式 */
       .info {
            margin-top: 30px;
        }

       .info p {
            margin: 10px 0;
            color: #666;
        }

        /* 地图容器样式 */
       .map-container {
            margin-top: 30px;
            width: 100%;
            height: 300px;
            border-radius: 5px;
        }
    </style>
    <!-- 引入百度地图API -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的百度地图AK"></script>
</head>

<body>
    <!-- 邀请函内容 -->
    <div class="invitation">
        <h1>邀请函</h1>
        <div class="info">
            <p><strong>时间：</strong>2025年9月1日 18:00</p>
            <p><strong>地点：</strong>上海市长宁区XX路XX号</p>
        </div>
        <!-- 地图容器 -->
        <div class="map-container" id="mapContainer"></div>
    </div>

    <script>
        // 初始化地图函数
        function initMap() {
            // 创建地图实例
            var map = new BMap.Map("mapContainer");
            // 设置地图中心点和缩放级别，这里需要替换为实际的经纬度
            var point = new BMap.Point(121.43, 31.24);
            map.centerAndZoom(point, 15);
            // 启用鼠标滚轮缩放
            map.enableScrollWheelZoom(true);
            // 添加标记
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // 创建信息窗口
            var infoWindow = new BMap.InfoWindow("这是活动地点");
            // 点击标记显示信息窗口
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
        }
        // 页面加载完成后初始化地图
        window.onload = initMap;
    </script>
</body>

</html>